<html>
<head>
</head>

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript">
	var _respostaServico = '';
	var SEP_SPLIT = ';';
	var SEP_VIRG = ',';
	//var _urlServico = 'http://localhost:8080/sata/resource/bsg';
	var _urlServico = 'http://stockoptionsanalysis.com/resource/bsg';
	
	google.load("visualization", "1", {
		packages : [ "corechart" ]
	});

	function Create2DArray(rows) {
		var arr = [];
		for ( var i = 0; i < rows; i++) {
			arr[i] = [];
		}
		return arr;
	}

	function convertStrToArrayNumber(str, separador) {
		var tmp = str.split(separador);
		for ( var i = 0; i < tmp.length; i++) {
			tmp[i] = parseFloat(tmp[i]);
		}
		return tmp;
	}
	
	function createRequest() {
		var result = null;

		if (window.XMLHttpRequest) {
			// FireFox, Safari, etc.
			result = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			// MSIE
			result = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			// No known mechanism -- consider aborting the application
		}
		//alert(result);
		result.overrideMimeType('text/plain');
		return result;
	}

	function consultaServico() {
		// cria o objeto de request
		var req = createRequest();

		// cria o callback:
		req.onreadystatechange = function() {
			if (req.readyState != 4) {
				//alert('a requisicao ainda nao esta pronta');
				return; // Not there yet
			} else {
				//alert('status ' + req.status);
				if (req.readyState == 4 && req.status == 200) {
					_respostaServico = req.responseText;
					alert(_respostaServico);
				}
			}
		}
		
		var precoExercicio = document.getElementById('precoExercicio').value;
		var inicioAcao = document.getElementById('inicioAcao').value;
		var fimAcao = document.getElementById('fimAcao').value;
		var intervaloAcao = document.getElementById('intervaloAcao').value;
		var volatilidade = document.getElementById('volatilidade').value;
		var taxaDeJuros = document.getElementById('taxaDeJuros').value;

		//var url = 'http://localhost:8080/sata/resource/bsg/22.0';
		//var url='http://localhost:8080/sata/resource/volatilidade/1/20.36/20/0.68/21/7,5';
		//var url='http://stockoptionsanalysis.com/resource/volatilidade/1/20.36/20/0.68/21/7,5';

		//alert(url);
		var url = _urlServico + '/' + precoExercicio + '/' + inicioAcao + '/' + fimAcao + '/' + intervaloAcao + '/' + volatilidade + '/' + taxaDeJuros;
		alert(url);
		req.open("GET", url, false);
		req.send(null);
	}

	function criaGrafico() {
		google.setOnLoadCallback(drawChart());
	}

	function drawChart() {

		//var msg = "'Acao', '1 dia', '5 dias';'1900',  -3, 9;'1950',  -3, 10;'2000',  -7, 11;'2050',  8, 4";
		//var msg = "19.00,-3,9;19.50,-4,10";
		//alert(msg);

		//var teste3 = Create2DArray(3);
		//alert(_respostaServico);
		var tmpResposta = _respostaServico.split(SEP_SPLIT);
		//alert(teste[1]);
		//var teste2 = teste[1].split(",");
		//for (var i = 0; i < teste2.length; i++) {
		//	teste2[i] = Number(teste2[i]);
		//}
		//alert(tmpResposta.length);
		var resposta = Create2DArray(tmpResposta.length);
		//alert(resposta);
		for ( var i = 0; i < tmpResposta.length; i++) {
			resposta[i] = convertStrToArrayNumber(tmpResposta[i], SEP_VIRG);
		}
		//alert(resposta);

		//var teste2 = convertStrToArrayNumber(teste[0], SEP_VIRG);
		//var teste3 = convertStrToArrayNumber(teste[1], SEP_VIRG);
		//var teste4 = convertStrToArrayNumber(teste[2], SEP_VIRG);
		//alert(teste2);
		//alert(teste3);
		//alert(teste4);
		//alert('length ' + teste2.length);
		//alert('teste3 ' + teste3);
		//var array2 = [['Acao', '1 dia', '5 dias'],[1900, -3, 9],[1950, -4, 10]];
		//alert('array2 ' + array2);
		//alert('teste3 length ' + teste3.length);
		//alert('array2 length ' + array2.length);
		var data = new google.visualization.DataTable();
		data.addColumn('number', 'Acao');
		data.addColumn('number', '30 dias');
		data.addColumn('number', '27 dias');
		data.addColumn('number', '24 dias');
		data.addColumn('number', '21 dias');
		data.addColumn('number', '18 dias');
		data.addColumn('number', '15 dias');
		data.addColumn('number', '12 dias');
		data.addColumn('number', '9 dias');
		data.addColumn('number', '6 dias');
		data.addColumn('number', '3 dias');
		for ( var i = 0; i < tmpResposta.length; i++) {
			data.addRow(resposta[i]);
		}
		var options = {
			title : 'Grafico Opcao'
		};

		//var newdiv = document.createElement('div');
		//alert(newdiv);
		//newdiv.setAttribute('id', 'chart_div2');
		//alert(newdiv.id);
		//document.body.appendChild(newdiv);
		//alert('eee2');
		//alert(document.getElementById('chart_div'));

		var chart = new google.visualization.LineChart(document
				.getElementById('chart_div'));
		//alert('ent1');
		chart.draw(data, options);
		//alert('ent2');
		
		//var chartArea = document.getElementById('chart_div');
		//var svg = "<svg><circle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red' /></svg>";
		
		//var canvas = document.createElement('canvas');
		//canvas.setAttribute('width', chartArea.offsetWidth);
		//canvas.setAttribute('height', chartArea.offsetHeight);
		//canvas.setAttribute('style','position: absolute; ' +'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
		//document.body.appendChild(canvas);
		//canvg(canvas, svg);
		//var imgData = canvas.toDataURL("image/png");
		// Populate img tag
		//var img = document.createElement('img');
		//img.src = imgData;
		//document.getElementById('imageContainer').appendChild(img);
	}
</script>

<body>
	<div>
		<table>
			<tr>
				<td>precoExercicio:</td>
				<td><input id="precoExercicio" type="text" value="20,0" /></td>
			</tr>
			<tr>
				<td>inicioAcao:</td>
				<td><input id="inicioAcao" type="text" value="19,0" /></td>
			</tr>
			<tr>
				<td>fimAcao:</td>
				<td><input id="fimAcao" type="text" value="21,0" /></td>
			</tr>
			<tr>
				<td>intervaloAcao:</td>
				<td><input id="intervaloAcao" type="text" value="0,5" /></td>
			</tr>
			<tr>
				<td>volatilidade:</td>
				<td><input id="volatilidade" type="text" value="27,5" /></td>
			</tr>
			<tr>
				<td>taxaDeJuros:</td>
				<td><input id="taxaDeJuros" type="text" value="7,5" /></td>
			</tr>
			<tr>
				<td><button onclick="consultaServico();">consultaServico</button></td>
				<td><button onclick="criaGrafico();">criaGrafico</button></td>
			</tr>
		</table>
	</div>
	<!--
	<svg>
		<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
	</svg> 
	-->
	<div id="chart_div" style="width: 900px; height: 500px;"></div>
	<div id="imageContainer" style="width: 900px; height: 500px;"></div>
</body>
</html>